import { getAreaConfig } from '@/utils/filterConfig';
import {
  getCurrencyCode,
  getSgIndicators,
  getSgYear,
  getIndexCode,
  getMarketCode,
  getEsgIndustry
} from './../apis';
import { ComponentType } from 'vc';
import { useRequest } from 'vue-request';
import { submitIndicatorFn, submitIndustryFn } from '@/views/modules/esg/utils/filterConfig';

export function useScreen(marketCode, codeLevel2, dimensionCode) {
  const PAGE_SIZE = 15;

  const queryData = reactive<any>({
    pageNum: 1,
    pageSize: PAGE_SIZE,
    searchTxt: '',
    sortRule: '',
    provinceCode: '',
    cityCode: '',
    countryCode: '',
    industryCategoryCodeLv1: '',
    industryCategoryCodeLv2: '',
    industryCategoryCodeLv3: '',
    indicatorFiled: '',
    indicatorOrder: '',
    statisticalPeriod: '',
    dimensionCode: dimensionCode
  });
  // 市场
  const { data: marketData } = useRequest(getMarketCode, {});
  // ESG行业
  const { data: industryData, run: runEsgIndustry } = useRequest(getEsgIndustry, {
    defaultParams: [{ type: marketCode }]
  });
  // 指数成分股
  const { data: IndexData } = useRequest(getIndexCode, {
    defaultParams: [{ type: 'ag' }]
  });
  // 币种
  const { data: currencyData } = useRequest(getCurrencyCode, {
    defaultParams: [{ type: 'ag' }]
  });
  const tagTagYear: any = ref([]);
  const activeYear = ref();
  const indicatorScreenData = ref({
    title: '指标',
    component: ComponentType.CASCADER,
    options: [],
    submitFn: (data) => {
    }
  });
  // 指标
  const { data: indicatorData } = useRequest(getSgIndicators, {
    defaultParams: [{ type: dimensionCode }],
    onSuccess(res) {
      runGetYear({
        dimensionCode: dimensionCode,
        marketCode: marketCode,
        esgType: 'environment',
        codeLevel2: codeLevel2 || res[0]?.code
      });
      indicatorScreenData.value = {
        title: '指标',
        component: ComponentType.CASCADER,
        options: res && res[0] ? res[0].values : [],
        submitFn: (data) => {
          queryData.indicatorCodes = submitIndicatorFn(data, res[0].values);
        }
      };
    }
  });
  // 年份
  const { data: yearData, run: runGetYear, params } = useRequest(getSgYear, {
    manual: true,
    onSuccess(res) {
      if (res && res.length) {
        tagTagYear.value = res.map((item) => {
          if (item.active) {
            activeYear.value = item.year;
            Object.assign(queryData, {
              codeLevel2: (params as any).value[0].codeLevel2 || codeLevel2 || indicatorData.value[0].code,
              statisticalPeriod: item.year,
              currencyType: currencyData.value[0].code
            });
          }
          return { ...item, name: `${item.year}年`, code: item.year };
        });
      }
    }
  });

  const common = ref([
    {
      ...getAreaConfig().value,
      submitFn: (val) => {
        const { lv1, lv2, lv3 } = val;
        queryData.provinceCode = lv1.join();
        queryData.cityCode = lv2.join();
        queryData.countryCode = lv3.join();
      }
    }
  ]);

  const changeIndicator = (index, code) => {
    indicatorScreenData.value = {
      title: '指标',
      component: ComponentType.CASCADER,
      options: indicatorData.value && indicatorData.value[index] ? indicatorData.value[index].values : [],
      submitFn: (data) => {
        queryData.indicatorCodes = submitIndicatorFn(data, indicatorData.value[index].values);
      }
    };
  };

  const screen = computed(() => {
    return [
      {
        title: '市场',
        component: ComponentType.SINGLE,
        required: true,
        options: marketData.value || [],
        value: 'ag',
        submitFn: (data) => {
          queryData.marketCode = data;
        }
      },
      {
        title: '年度',
        component: ComponentType.SINGLE,
        required: true,
        options: tagTagYear.value || [],
        value: activeYear.value,
        submitFn: (data) => {
          queryData.statisticalPeriod = data;
        }
      },
      indicatorScreenData.value,
      {
        title: '行业',
        component: ComponentType.CASCADER,
        options: industryData.value || [],
        lv1Single: true,
        submitFn: (data) => {
          Object.assign(queryData, submitIndustryFn(data, industryData));
        }
      },
      ...common.value,
      {
        title: '指数成分股',
        component: ComponentType.SINGLE,
        options: IndexData.value || [],
        required: false,
        submitFn: (data) => {
          queryData.indexType = data;
        }
      },
      {
        title: '币种',
        component: ComponentType.SINGLE,
        options: currencyData.value || [],
        required: false,
        value: currencyData.value && currencyData.value.length > 0 ? currencyData.value[0].code : '',
        submitFn: (data) => {
          queryData.currencyType = data;
        }
      }
    ];
  });

  const screenHg = computed(() => {
    return [
      {
        title: '行业',
        component: ComponentType.CASCADER,
        options: industryData.value || [],
        lv1Single: true,
        submitFn: (data) => {
          Object.assign(queryData, submitIndustryFn(data, industryData));
        }
      },
      {
        title: '年度',
        component: ComponentType.SINGLE,
        required: true,
        options: tagTagYear.value || [],
        value: activeYear.value,
        submitFn: (data) => {
          queryData.statisticalPeriod = data;
        }
      },
      indicatorScreenData.value,
      {
        title: '币种',
        component: ComponentType.SINGLE,
        options: currencyData.value || [],
        required: false,
        value: currencyData.value && currencyData.value.length > 0 ? currencyData.value[0].code : '',
        submitFn: (data) => {
          queryData.currencyType = data;
        }
      }
    ];
  });

  return {
    PAGE_SIZE,
    screen,
    screenHg,
    queryData,
    indicatorData,
    runGetYear,
    changeIndicator
  };
}
